import React, { FC, useEffect } from 'react'
import { Form, Input } from 'antd'
import { useDispatch } from 'react-redux'
import useGetPageInfo from '../../../hooks/useGetPageInfo'

import { resetPageInfo } from '../../../store/pageInfoReducer'

const PageSetting: FC = () => {
  // *dispath方法
  const dispatch = useDispatch()

  const pageInfo = useGetPageInfo()
  const { title, desc, js, css } = pageInfo

  const { TextArea } = Input

  // *获取form实例
  const [form] = Form.useForm()

  //* 实时更新表单内容
  useEffect(() => {
    form.setFieldsValue(pageInfo)
  }, [pageInfo])

  // *同步 表单问卷信息
  function handleValuesChange() {
    console.log(form.getFieldsValue())
    dispatch(resetPageInfo(form.getFieldsValue()))
  }
  return (
    <Form
      layout="vertical"
      initialValues={pageInfo}
      onValuesChange={handleValuesChange}
      form={form}
    >
      <Form.Item label="问卷标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
        <Input placeholder="请输入标题..." />
      </Form.Item>
      <Form.Item label="问卷描述" name="desc">
        <TextArea placeholder="请输入问卷描述..." />
      </Form.Item>
      <Form.Item label="样式代码" name="css">
        <TextArea placeholder="请输入css样式代码..." />
      </Form.Item>
      <Form.Item label="脚本代码" name="js">
        <TextArea placeholder="请输入js脚本代码..." />
      </Form.Item>
    </Form>
  )
}

export default PageSetting
